<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用class和id选择器-->
    <style>
        /* ul的第一个元素 */
        ul li:first-child{
            background: #c2deec; /* 设置列表项的样式为方形 */
        }

        /* ul的最后一个元素 */
        ul li:last-child{
            background: #0c74aa; /* 设置列表项的样式为方形 */
        }
        /* 选中P1 定位到父元素 选择当前的第一个元素
            选择当前P元素的父级元素，选中父级元素的第一个子元素，此元素必须是当前元素才生效
        */

            p:nth-child(2){
            background: #aa290c; /* 设置列表项的样式为方形 */
        }

        /* 选中父元素下的P元素的第二个子元素，类型
               */
        p:nth-of-type(2){
            background: #dacd41; /* 设置列表项的样式为方形 */
        }
        a:hover{
            background: #041e39;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度一下</a>
<h1>这是一个标题</h1>
<p>    P1: 这是一个简单的HTML页面示例。您可以在这里添加更多内容。</p>
<p>    P2: 这是一个简单的HTML页面示例。您可以在这里添加更多内容。</p>
<p>    P3: 这是一个简单的HTML页面示例。您可以在这里添加更多内容。</p>
<ul>
    <li>列表项1
    </li>
    <li>列表项2
    </li>
    <li>列表项3
    </li>
</ul>
</body>
</html>